<template>
	<view class="barbox">
		 
		<view class="location"
		 @click="showDrawer">
		<uni-icons type="location" size="28"></uni-icons>
		<text>{{citys.default?.name}}</text>	
		</view>		
		 
		<uni-search-bar  class="search"
		@confirm="search" 
		:focus="true" 
		clearButton="none"
		cancelButton="always"
		cancelText = "找房源"
		v-model="searchValue"  
		 @clear="clear">
		</uni-search-bar>
		<view>  </view>
	</view>
	<view>
		 
		<uni-drawer ref="showRight" mode="left" :mask-click="true">
			<scroll-view class="scroll" style="height: 100%;" scroll-y="true">
				<view class="title">
					<text>当前城市：{{citys.default?.name}}</text>
				</view> 
				<view class="title"><text>选择其他：</text></view>
				<view class="city-list">
				<view v-for="item in citys.citys" :key="item">
					<view  class="city-name"><text>{{ item.name }}</text></view>
				</view>	
				</view>
				
			</scroll-view>
		</uni-drawer>
	</view>
</template>

<script>
 
	export default {
		name:"cityBar",
		data() {
			return {
				searchValue:"",
			};
		}, 
		props:{
			citys: {
				default:{
					'default':{},
					'citys':{}
				}
			}, 	
		},
		methods: {
			search(e){ this.$emit('changeCity',e)},
			clear(){},
					showDrawer() {
						this.$refs.showRight.open();
						 
					},
					closeDrawer() {
						this.$refs.showRight.close();
					}
		
				} 
	}
</script>

<style>
.barbox{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: .2em;
}
.barbox .location{
	display: flex;
	align-items: center;
}
.barbox .search{
	flex-grow: 2;
}
.scroll{
	padding: 1em;
}
.scroll .title{
	margin-bottom: .5em;
}
.scroll .city-list{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.city-list .city-name{
	border: 1px solid #eee;
	border-radius: 5px;
	margin: 5px;
	padding: 2px 2px;
}
</style>